<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <title>商品详情</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/hh.css">
    <!-- 导入 layui -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/layer.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        window.onload=function () {
            //发送请求函数
            function sendRequest() {
                var Time = new Date().toLocaleString();
                let proName = $(".name").text();
                let proId = $(".proId").val();
                let proPrice = $(".proPrice").val();
                // alert(Time)

                console.log("http://localhost:8080/demo/seat/"
                    +proId+"/"+proName+"/"+proPrice+"/"+Time)
                //发起请求
                ///{proId}/{proName}/{proPrice}/{Time}
                window.location.href="http://localhost:8080/demo/seat/"
                    +proId+"/"+proName+"/"+proPrice;
            }
           //全部按钮
            let ovj = document.getElementById("s1").onclick=function () {
                sendRequest();
            }
            document.getElementById("s2").onclick=function (){
                sendRequest();
            }
            document.getElementById("s3").onclick=function (){
                sendRequest();
            }
            document.getElementById("s4").onclick=function (){
                sendRequest();
            }
            document.getElementById("s5").onclick=function (){
                sendRequest();
            }
            document.getElementById("s6").onclick=function (){
                sendRequest();
            }

        }
        //日期部分
        function fun1(idx) {
            //日期部分
            let list = document.getElementById("t1").getElementsByTagName("li");
            let obj = list[idx];
            for (let i = 0; i <=6; i++) {
                if (i!==idx){
                    list[i].setAttribute("class","")
                }else {
                    obj.setAttribute("class","active")
                }
            }

        }
        //品牌部分
        function fun2(idx) {
            let list = document.getElementById("t2").getElementsByTagName("li");
            let obj = list[idx];
            for (let i = 0; i <=7; i++) {
                if (i!==idx){
                    list[i].setAttribute("class","")
                }else {
                    obj.setAttribute("class","active")
                }
            }
        }
        //行政区
        function fun3(idx) {
            let list = document.getElementById("t3").getElementsByTagName("li");
            let obj = list[idx];
            for (let i = 0; i <=18; i++) {
                if (i!==idx){
                    list[i].setAttribute("class","")
                }else {
                    obj.setAttribute("class","active")
                }
            }
        }
        //影厅类型
        function fun4(idx) {
            let list = document.getElementById("t4").getElementsByTagName("li");
            let obj = list[idx];
            for (let i = 0; i <=3; i++) {
                if (i!==idx){
                    list[i].setAttribute("class","")
                }else {
                    obj.setAttribute("class","active")
                }
            }
        }
        //服务
        function fun5(idx) {
            let list = document.getElementById("t5").getElementsByTagName("li");
            let obj = list[idx];
            for (let i = 0; i <=2; i++) {
                if (i!==idx){
                    list[i].setAttribute("class","")
                }else {
                    obj.setAttribute("class","active")
                }
            }
        }

    </script>
</head>
<body>
<input type="hidden" class="proId" value="${product.proId}">
<input type="hidden" class="proPrice" value="${product.proPrice}">
<%----%>
<div class="layui-container header">
    <div class="layui-row ">
        <div class="layui-col-md2">
            <img src="${pageContext.request.contextPath}/images/logo.png" alt="">
            <p class="logo_font">IRON电影</p>
        </div>
        <div class="layui-col-md4" style="margin-left: 100px">
        <span class="layui-breadcrumb " lay-separator="  " >
            <a href="http://localhost:8080/demo/product">首页</a>
                  <a href="http://localhost:8080/demo/film">电影</a>
                <a href="https://www.bilibili.com/">体育</a>
                <a href="https://www.bilibili.com/">搞笑</a>
                <a href="https://www.bilibili.com/">视频</a>
                <a href="${pageContext.request.contextPath}/hot.jsp">热点</a>

                <a href="${pageContext.request.contextPath}/movie_rank.jsp">榜单</a>
      </span>
        </div>
        <div class="layui-col-md2">
            <div class="header_user">
                <a href="${pageContext.request.contextPath}/personalCenter.jsp" id="header_myself"><span>个人中心</span></a>
                <a href="${pageContext.request.contextPath}/personalCenter.jsp"> <img id="header_myself_logo" src="${pageContext.request.contextPath}/images/user.png" alt=""></a>
            </div>
        </div>
    </div>
</div>
<div class="banner">
    <div class="wrapper clearfix">
        <div class="celeInfo-left">
            <div class="avatar-shadow">
                <img class="avatar" src="${pageContext.request.contextPath}/${product.proImg}" >
                <div class="movie-ver"></div>
            </div>
        </div>
        <div class="celeInfo-right clearfix">
            <div class="movie-brief-container" >
                <h1 class="name">${product.proName}</h1>
                <div class="ename ellipsis">${film.filmEname}</div>
                <ul>
                    <li class="ellipsis">
                        <c:forEach var="type" items="${typeList}">
                        <a class="text-link" href="/films?catId="  target="_blank"> ${type.typeName}</a>
                        </c:forEach>
                    </li>
                    <li class="ellipsis">
                        ${film.filmRegion}
                        / ${duration}分钟
                    </li>
                    <li class="ellipsis">${ctime}中国大陆上映</li>
                </ul>
            </div>
            <div class="action-buyBtn">
                <a class="btn buy" href="http://localhost:8080/demo/film/${product.proId}" target="_blank" data-act="more-detail-click" data-bid="b_ozuzh4j4">查看电影详情</a>
<%----%>
            </div>
        </div>
    </div>
</div>
<!-- 日期部分 -->
<div class="container" id="app" class="page-cinemas/list" >
    <div class="tags-panel">
        <ul class="tags-lines">
            <li class="tags-line">
                <div class="tags-title">日期:</div>
                <ul class="tags" id="t1">
                    <li class="active">
                        <a data-act="tag-click"
                           data-val="{TagName:'2023-12-29'}"
                           data-bid="b_beyqev3w"
                           onclick="fun1(0)"
                           href="#"

                        >
                            今天 12月29
                        </a>
                    </li>
                    <li class="">
                        <a data-act="tag-click"
                           data-val="{TagName:'2023-12-30'}"
                           data-bid="b_beyqev3w"
                           onclick="fun1(1)"
                           href="#"
                        >
                            明天 12月30
                        </a>
                    </li>
                    <li class="">
                        <a data-act="tag-click"
                           data-val="{TagName:'2023-12-31'}"
                           data-bid="b_beyqev3w"
                           onclick="fun1(2)"
                           href="#"
                        >
                            周日 12月31
                        </a>
                    </li>
                    <li class="">
                        <a data-act="tag-click"
                           data-val="{TagName:'2024-01-01'}"
                           data-bid="b_beyqev3w"
                           onclick="fun1(3)"
                           href="#"
                        >
                            周一 1月1
                        </a>
                    </li>
                    <li class="">
                        <a data-act="tag-click"
                           data-val="{TagName:'2024-01-02'}"
                           data-bid="b_beyqev3w"
                           onclick="fun1(4)"
                           href="#"
                        >
                            周二 1月2
                        </a>
                    </li>
                    <li class="">
                        <a data-act="tag-click"
                           data-val="{TagName:'2024-01-03'}"
                           data-bid="b_beyqev3w"
                           onclick="fun1(5)"
                           href="#"
                        >
                            周三 1月3
                        </a>
                    </li>
                    <li class="">
                        <a data-act="tag-click"
                           data-val="{TagName:'2024-01-04'}"
                           data-bid="b_beyqev3w"
                           onclick="fun1(6)"
                           href="#"
                        >
                            周四 1月4
                        </a>
                    </li>
                </ul>
            </li>


            <li class="tags-line tags-line-border" data-type="brand">
                <div class="tags-title">品牌:</div>
                <ul class="tags" id="t2">
                    <li class="active">
                        <a data-act="tag-click" data-val="{TagName:'全部', city_id:419}" data-id="-1" href="#" data-bid="b_n6nqkt97" onclick="fun2(0)">全部</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'上影国际影城', city_id:419}" data-id="358411" href="#" data-bid="b_n6nqkt97" onclick="fun2(1)">上影国际影城</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'中影国际影城', city_id:419}" data-id="192146" href="#" data-bid="b_n6nqkt97" onclick="fun2(2)">中影国际影城</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'万达影城', city_id:419}" data-id="188982" href="#" data-bid="b_n6nqkt97" onclick="fun2(3)">万达影城</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'星轶starx影城', city_id:419}" data-id="496912" href="#" data-bid="b_n6nqkt97" onclick="fun2(4)">星轶starx影城</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'苏宁影城', city_id:419}" data-id="484416" href="#" data-bid="b_n6nqkt97" onclick="fun2(5)">苏宁影城</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'幸福蓝海国际影城', city_id:419}" data-id="218699" href="#" data-bid="b_n6nqkt97" onclick="fun2(6)">幸福蓝海国际影城</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'恒大嘉凯影城', city_id:419}" data-id="393630" href="#" data-bid="b_n6nqkt97" onclick="fun2(7)">恒大嘉凯影城</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'其他', city_id:419}" data-id="0" href="#" data-bid="b_n6nqkt97">其他</a>
                    </li>
                </ul>
            </li>
            <li class="tags-line tags-line-border" data-type="district">
                <div class="tags-title">行政区:</div>
                <ul class="tags" id="t3">
                    <li class="active">
                        <a data-act="tag-click" data-val="{TagName:'全部', city_id:419}" data-id="-1" href="#" data-bid="b_ofl973zc" onclick="fun3(0)">全部</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'地铁附近', city_id:419}" data-id="-2" href="#" data-bid="b_ofl973zc" onclick="fun3(1)">地铁附近</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'金港镇', city_id:419}" data-id="14269" href="#" data-bid="b_ofl973zc" onclick="fun3(2)">金港镇</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'塘桥镇', city_id:419}" data-id="14268" href="#" data-bid="b_ofl973zc" onclick="fun3(3)">塘桥镇</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'锦丰镇', city_id:419}" data-id="14183" href="#" data-bid="b_ofl973zc" onclick="fun3(4)">锦丰镇</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'步行街', city_id:419}" data-id="18857" href="#" data-bid="b_ofl973zc" onclick="fun3(5)">步行街</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'乐余镇', city_id:419}" data-id="14187" href="#" data-bid="b_ofl973zc" onclick="fun3(6)">乐余镇</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'杨舍镇', city_id:419}" data-id="18966" href="#" data-bid="b_ofl973zc" onclick="fun3(7)">杨舍镇</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'吾悦广场', city_id:419}" data-id="24128" href="#" data-bid="b_ofl973zc" onclick="fun3(8)">吾悦广场</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'合兴镇', city_id:419}" data-id="18496" href="#" data-bid="b_ofl973zc" onclick="fun3(9)">合兴镇</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'万达广场', city_id:419}" data-id="46375" href="#" data-bid="b_ofl973zc" onclick="fun3(10)">万达广场</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'购物公园', city_id:419}" data-id="18859" href="#" data-bid="b_ofl973zc" onclick="fun3(11)">购物公园</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'杨舍老街', city_id:419}" data-id="18861" href="#" data-bid="b_ofl973zc" onclick="fun3(12)">杨舍老街</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'城北', city_id:419}" data-id="18863" href="#" data-bid="b_ofl973zc" onclick="fun3(13)">城北</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'塘市镇', city_id:419}" data-id="46258" href="#" data-bid="b_ofl973zc" onclick="fun3(14)">塘市镇</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'大新镇', city_id:419}" data-id="14270" href="#" data-bid="b_ofl973zc" onclick="fun3(15)">大新镇</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'城南', city_id:419}" data-id="44927" href="#" data-bid="b_ofl973zc" onclick="fun3(16)">城南</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'凤凰镇', city_id:419}" data-id="14175" href="#" data-bid="b_ofl973zc" onclick="fun3(17)">凤凰镇</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'香港城', city_id:419}" data-id="43519" href="#" data-bid="b_ofl973zc" onclick="fun3(18)">香港城</a>
                    </li>
                </ul>
            </li>
            <li class="tags-line tags-line-border" data-type="hallType">
                <div class="tags-title">影厅类型:</div>
                <ul class="tags" id="t4">
                    <li class="active">
                        <a data-act="tag-click" data-val="{TagName:'全部', city_id:419}" data-id="-1" href="#" data-bid="b_oz4r0rs9" onclick="fun4(0)">全部</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'IMAX厅', city_id:419}" data-id="2" href="#" data-bid="b_oz4r0rs9" onclick="fun4(1)">IMAX厅</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'CGS中国巨幕厅', city_id:419}" data-id="3" href="#" data-bid="b_oz4r0rs9" onclick="fun4(2)">CGS中国巨幕厅</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'杜比全景声厅', city_id:419}" data-id="9" href="#" data-bid="b_oz4r0rs9" onclick="fun4(3)">杜比全景声厅</a>
                    </li>
                </ul>
            </li>
            <li class="tags-line tags-line-border" data-type="service">
                <div class="tags-title">影院服务:</div>
                <ul class="tags" id="t5">
                    <li class="active">
                        <a data-act="tag-click" data-val="{TagName:'全部', city_id:419}" data-id="-1" href="#" data-bid="" onclick="fun5(0)">全部</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'可改签', city_id:419}" data-id="3" href="#" data-bid="" onclick="fun5(1)">可改签</a>
                    </li>
                    <li class="">
                        <a data-act="tag-click" data-val="{TagName:'可退票', city_id:419}" data-id="2" href="#" data-bid="" onclick="fun5(2)">可退票</a>
                    </li>
                </ul>
            </li>
        </ul>
 </div>
<!-- 影院列表 -->
<div  class="cinemas-list">
    <span>影院列表</span>
    <!-- 1 -->
    <div class="cinema-cell">
        <div class="cinema-info">
            <a href="/cinema/9157?poi=4435123&amp;movieId=1426479" class="cinema-name" data-act="cinema-name-click" data-bid="b_wek7vrx9" data-val="{city_id: 419, cinema_id: 9157}">Atmos皇家影城</a>
            <p class="cinema-address">地址:张家港市暨阳中路71号1-2层</p>
            <div class="cinema-tags">
                <span class="cinema-tags-item">改签</span>
                <span class="cinema-tags-item">折扣卡</span>
                <span class="cinema-tags-item">杜比全景声厅</span>
            </div>
        </div>
        <div class="buy-btn">
            <input type="button" class="buyTickets" value="选座购票" id="s1">

        </div>

        <div class="price">
            <span class="rmb red">￥</span>
            <span class="price-num red"><span class="stonefont">${product.proPrice}</span></span>
            <span>起</span>
            <span class="cinema-distance">3.6km</span>
        </div>
    </div>
    <!-- 2 -->
    <div class="cinema-cell">
        <div class="cinema-info">
            <a href="/cinema/9157?poi=4435123&amp;movieId=1426479" class="cinema-name" data-act="cinema-name-click" data-bid="b_wek7vrx9" data-val="{city_id: 419, cinema_id: 9157}">澳门影城</a>
            <p class="cinema-address">地址：上海市上海中路71号1-2层</p>
            <div class="cinema-tags">
                <span class="cinema-tags-item">改签</span>
                <span class="cinema-tags-item">折扣卡</span>
                <span class="cinema-tags-item">杜比全景声厅</span>
            </div>
        </div>
        <div class="buy-btn">
            <input type="button" class="buyTickets" value="选座购票" id="s2">
        </div>
        <div class="price">
            <span class="rmb red">￥</span>
            <span class="price-num red"><span class="stonefont">${product.proPrice}</span></span>
            <span>起</span>
            <span class="cinema-distance">2.3km</span>
        </div>
    </div>
    <!-- 3 -->
    <div class="cinema-cell">
        <div class="cinema-info">
            <a href="/cinema/9157?poi=4435123&amp;movieId=1426479" class="cinema-name" data-act="cinema-name-click" data-bid="b_wek7vrx9" data-val="{city_id: 419, cinema_id: 9157}">Apachi曼巴特影城</a>
            <p class="cinema-address">地址：北京市天安大道4号1-2层</p>
            <div class="cinema-tags">
                <span class="cinema-tags-item">改签</span>
                <span class="cinema-tags-item">折扣卡</span>
                <span class="cinema-tags-item">杜比全景声厅</span>
            </div>
        </div>
        <div class="buy-btn">
            <input type="button" class="buyTickets" value="选座购票" id="s3">
        </div>
        <div class="price">
            <span class="rmb red">￥</span>
            <span class="price-num red"><span class="stonefont">${product.proPrice}</span></span>
            <span>起</span>
            <span class="cinema-distance">3.6km</span>
        </div>
    </div>
    <!-- 4 -->
    <div class="cinema-cell">
        <div class="cinema-info">
            <a href="/cinema/9157?poi=4435123&amp;movieId=1426479" class="cinema-name" data-act="cinema-name-click" data-bid="b_wek7vrx9" data-val="{city_id: 419, cinema_id: 9157}">Atmos巨幕影城</a>
            <p class="cinema-address">地址：深圳市龙岗大道5号9-2层</p>
            <div class="cinema-tags">
                <span class="cinema-tags-item">改签</span>
                <span class="cinema-tags-item">折扣卡</span>
                <span class="cinema-tags-item">杜比全景声厅</span>
            </div>
        </div>
        <div class="buy-btn">
            <input type="button" class="buyTickets" value="选座购票" id="s4">
        </div>
        <div class="price">
            <span class="rmb red">￥</span>
            <span class="price-num red"><span class="stonefont">${product.proPrice}</span></span>
            <span>起</span>
            <span class="cinema-distance">2,5km</span>
        </div>
    </div>
    <!-- 5 -->
    <div class="cinema-cell">
        <div class="cinema-info">
            <a href="/cinema/9157?poi=4435123&amp;movieId=1426479" class="cinema-name" data-act="cinema-name-click" data-bid="b_wek7vrx9" data-val="{city_id: 419, cinema_id: 9157}">Bench天马影院</a>
            <p class="cinema-address">地址：张家港市暨阳中路71号1-2层</p>
            <div class="cinema-tags">
                <span class="cinema-tags-item">改签</span>
                <span class="cinema-tags-item">折扣卡</span>
                <span class="cinema-tags-item">杜比全景声厅</span>
            </div>
        </div>
        <div class="buy-btn">
            <input type="button" class="buyTickets" value="选座购票" id="s5">
        </div>
        <div class="price">
            <span class="rmb red">￥</span>
            <span class="price-num red"><span class="stonefont">${product.proPrice}</span></span>
            <span>起</span>
            <span class="cinema-distance">11km</span>
        </div>
    </div>
</div>
</body>
</html>
